/// <reference types="react" />
import React, { MouseEventHandler } from 'react';
// import { DashboardOutlined, CarryOutOutlined, DesktopOutlined, SafetyCertificateOutlined, SettingOutlined } from '@ant-design/icons';
import Icon from '@ant-design/icons';
import * as icons from '@ant-design/icons';
import { endsWith } from 'lodash';

// 菜单图标
// export const IconMap = {
//   'DashboardOutlined': <DashboardOutlined />,
//   'CarryOutOutlined': <CarryOutOutlined />,
//   'DesktopOutlined': <DesktopOutlined />,
//   'SafetyCertificateOutlined': <SafetyCertificateOutlined />,
//   'SettingOutlined': <SettingOutlined />,
// };

// antd图标集合
export const iconList = Object.keys(icons).filter((item) => endsWith(item, 'Outlined'));

/**
 * 根据名称获取图标，当名称不存在时，返回null
 * 
 * @param iconName 图标名称
 * @returns 
 */
export const getAntdIcon = (iconName: string, onClick?: MouseEventHandler<HTMLSpanElement> | undefined) => {
  if (!iconList.includes(iconName)) {
    return null;
  }
  const AntIcon = icons[iconName as keyof typeof icons]; // 类型断言确保安全
  if (onClick) {
    return AntIcon ? <Icon component={AntIcon as React.ForwardRefExoticComponent<any>} onClick={onClick}/> : null;  // 校验图标是否存在
  }
  return AntIcon ? <Icon component={AntIcon as React.ForwardRefExoticComponent<any>}/> : null;  // 校验图标是否存在
};